<template>
  <div class="search-moblie" v-show="show">
    <el-input v-model="inputValue" placeholder="请输入内容"
      @keyup.enter.native="handleInputConfirm" ref="inputsearch"
    ></el-input>
    <ul class="list-group" style="max-height:400px;overflow: auto;">
      <li class="list-group-item" v-for="(name, index) in ecs" @click="handleSelect(name)" :key="index">{{name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mobliesearch",
  title: "移动端搜索",
  props: {
    value: {},
    show: false
  },
  data () {
    return {
      inputValue: ''
    }
  },
  mounted () {
    this.inputValue = this.value
  },
  methods: {
    handleInputConfirm () {
      this.$emit('input', this.inputValue)
    },
    handleSelect (name) {
      this.$emit('input', this.name)
    }
  },
  watch: {
    'value' () {
      this.inputValue = this.value
    },
    'show' (val) {
      if (val) {
        this.$refs.inputsearch.focus()
      }
    }
  }
}
</script>

<style lang="less">
</style>
